<template>
  <TodoHeader @add="addHandler" />
  <TodoList :data="todos" @remove="removeHandler" />
  <TodoFooter :data="todos" />
</template>

<script lang="ts">
import TodoFooter from "./components/TodoFooter.vue";
import TodoHeader from "./components/TodoHeader.vue";
import TodoList from "./components/TodoList.vue";
import { reactive } from "vue";
import type { ITodo } from "./add.types";

export default {
  name: "App",
  components: {
    TodoHeader,
    TodoList,
    TodoFooter,
  },
  setup() {
    let maxId = 4;
    let todos = reactive<ITodo[]>([
      { id: 1, title: "aaa", done: true },
      { id: 2, title: "bbb", done: false },
      { id: 3, title: "ccc", done: false },
    ]);
    // console.log(todos);
    // setTimeout(() => {
    //   todos.push({
    //     id: 4,
    //     title: "123",
    //     done: true,
    //   });
    // }, 3000);
    //添加一个todo方法
    const addHandler = (newVal: string) => {
      todos.unshift({
        id: maxId++,
        title: newVal,
        done: false,
      });
    };
    const removeHandler = (id: number) => {
      //  大错特错，因为 todos 是响应式的数组，但是 filter 返回的是一个普通数组，todos的响应式丢失了
      // todos = todos.filter((todo) => todo.id != id);
      // 下面这个做法也是有问题的，赋值后的 todos 和 原来的 todos 已经不是一个对象了
      // todos = reactive(todos.filter((todo) => todo.id != id));

      // 我们只能在 已有的 todos 中进行操作，这里不要使用 filter
      // 先找到 id 对应的 index
      const index = todos.findIndex((todo) => todo.id == id);
      todos.splice(index, 1);
    };
    return {
      todos,
      addHandler,
      removeHandler,
    };
  },
};
</script>

<style scoped></style>
